ArrayBuffer

ArrayBuffer (又稱byte-array) 就是一段固定大小的記憶體區塊，儲存二進位制資料的一段記憶體，是一個個 0/1 組成的串，表示原始二進位制資料緩衝區。所有javaScript引擎內部皆會產生ArrayBuffer。
Ex. buff = new ArrayBuffer(1024) 表示建立的一塊1KB的記憶空間。

和Blob一樣，是用來儲存二進位資料的一種資料格式，可以用來儲存各種檔案內容，例如 jpg,txt...等，任何你想得到的，都可以用 ArrayBuffer存。那你可能會想，既然和Blob一樣，又為什麼要轉換成ArrayBuffer呢？後面會再跟大家分享～

特性

ArrayBuffer物件不能直接讀寫(不能直接操作這個記憶體)，只能通過檢視(view):TypedArray 和 DataView 來讀寫。

TypedArray

TypedArray就是為了操作binary data而生。所謂Type指的是「特定的型別」EX: Int8Array, Float32Array

DataView

能用多種不同的型別對 ArrayBuffer 進行修改、解讀。Ex:可以指定要從哪個字節開始以及長度

const buffer = new ArrayBuffer(32)
const view = new DataView(buffer, 8, 10) //從8開始，10個長度

DataView 是視圖，並不會存放資料，所有的資料皆實際存於ArrayBuffer 物件當中

為什麼有ArrayBuffer

在js中，有些時候會有取得或需處理檔案資料的時候，Ex.從XHR拿到一個blob的檔案資料、從File API上傳一個圖檔取得file Object、或是從Canvas取得。但檔案轉換的blob通常會是一大串byte stream。如果用js中的array存取，浪費資源又效率低，因此為了提升js對於二進位的處理能力，便有了arrayBuffer

Blob vs ArrayBuffer

除非需要編輯或讀寫，不然在檔案處理時使用Blob是最佳解

• 編輯讀寫請使用 ArrayBuffer

參考資料

• https://www.zhihu.com/question/30401979
• https://stackoverflow.com/questions/11821096/what-is-the-difference-between-an-arraybuffer-and-a-blob/39951543
• https://yahone-chow.medium.com/arraybuffer-279733d7aa51
• https://www.puritys.me/docs-blog/article-294-Javascript-%E8%99%95%E7%90%86-Binary-%E8%B3%87%E6%96%99---ArrayBuffer.html
• https://codertw.com/%e5%89%8d%e7%ab%af%e9%96%8b%e7%99%bc/282041/ (JavaScript中的ArrayBuffer詳細介紹)